<template>
  <div v-if="theme" :class="['theme', cname]">
    <div class="hd">
    	<span class="theme-text">{{theme.title}}</span>
    	<span class="text-tip">{{theme.
description}}</span>
    	<div @click="onMore(theme.type)" class="more">更多</div>
    </div>
    <ul class="box">
    	<li class="box-item" v-for="item in showComics">
    		<Comic @onTapComic="onTapComic" :comic="item"/>
    	</li>
    </ul>
  </div>
</template>

<script>
import Comic from './Comic.vue'
import {getRandomArray} from '../../utils/common.js'
export default {
	components: {
    Comic
  },
	props: {
		theme: {
			type: Object,
			default: null
		},
		cname: {
			type: String,
			default: ''
		},
		count: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			current: 0,
		}
	},
  computed: {
    showComics() {
    	return this.count>0?
    		getRandomArray(this.theme.comics,this.count):
    		this.theme.comics()
    }
  },
	methods: {
		onMore(type) {
			this.$router.push({path:"/theme/more",query:{
			  id:this.theme
			}})
		},
		onTapComic(cid) {
			console.log("点击了漫画 "+ cid)
			this.$router.push({path: `/comic/${cid}`});
		}
	},
	watch: {
　　'$route' (to, from) {
	　　this.$router.go(1)
	　　}
	}
}
</script>
<style lang="scss">
@import '../../assets/style/color.scss';
.theme {
	width: 100%;
	.hd {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 8px;
		box-sizing: border-box;
		position: relative;
		.theme-text{
			font-size: $font-size-18;
			color: #333;
			font-weight: 600;
		}
		.text-tip {
			margin-left: 8px;
			color: #999;
			font-size: $font-size-16;
		}
		.more {
			position: absolute;
			bottom: 12px;
			right: 8px;
			padding: 0 6px 1px 6px;
			border: 1px solid #999;
			color: #999;
			border-radius: 10px;
			font-size: $font-size-10;
		}
		.list-box {
			width: 100%;
			.list-item {
				width: 100px;
				height: 200px;
				margin-left: 4%;
				margin-right: 4%;
				overflow: hidden;
			}
		}
	}
	.box {
		width: 100%;
		box-sizing: border-box;
		clear: both;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.box-item {
			width: 28%;
			margin-left: 4%;
			margin-bottom: 10px;
		}
	}
}
</style>
